<template>
	<view>
		<view class="tabs u-m-b-20">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="80"></u-tabs>
		</view>
		<block v-if="orderList.length > 0">
		<view class="order-list u-p-30">
			<block v-for="item in orderList" :key="item.id">
				<view class="order" v-if="item.orderDetails.data.length > 0">
					<view class="title u-flex u-row-between u-col-center u-m-b-20">
						<text>共计{{page}}件商品</text>
						<view>
							<u-tag :text="payStatu[item.status]" type="error" />
						</view>
					</view>
					<allcart :order="item.orderDetails.data"></allcart>
					<view class="buttom u-flex u-row-between u-col-center">
						<view class="date">{{item.updated_at}}</view>
						<view class="status">
							<u-tag :text="payStatus[item.status]" type="success" />
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-divider :color="$u.color['info']" half-width="200" border-color="#6d6d6d" class="u-m-b-10" v-show="orderList.length">我是有底线的</u-divider>
		</block>
		<view class="" v-else>
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待付款'
				}, {
					name: '已支付'
				}, {
					name: '待收货',
				}, {
					name: '已完成',
				}, {
					name: '已过期',
				}],
				orderList: [],
				current: 0,
				status: 1,
				page: 1,
				payStatu: {
					1: '未支付',
					2: '已支付',
					3: '已完成'
				},
				payStatus: {
					1: '去付款',
					2: '已支付',
					3: '已完成'
				},
				date: '日期',
				order: []
			}
		},
		methods: {
			change(index) {
				console.log(index);
				this.current = index
				this.status = this.current + 1;
				this.getData()
			},
			onLoad() {
				this.getData()
			},
			async getData() {
				const params = {
					page: this.page,
					status: this.status,
					include: 'orderDetails.goods'
				}
				const {
					data,
					meta
				} = await this.$u.api.getOrder(params);
				this.orderList = data;
				// data.map( e=> {

				// 	console.log(e)
				// });
				// this.orderList = data;
				console.log(data, meta);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-list {
		.order {
			padding: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 3px 5px 2px rgba(0, 0, 0, .05);
			margin-bottom: 30rpx;

			.buttom {
				color: $u-type-info;
			}
		}
	}
</style>
